<template>
  <div class="complaint-list sub-margin">
    <div class="sub-page-title">企业判定监测</div>
    <div class="conditions">
      <el-row>
        <el-col :span="19">
          <el-input
            class="search-input"
            @keyup.enter.native="onSearch"
            size="large"
            v-model.trim="filtersVal.keyWords"
            clearable
            placeholder="请输入算法关键字"
            @clear="onSearch">
            <!-- <div slot="append">
            </div> -->
          </el-input>
          <div class="search-btn">
            <el-button class="export-btn" type="primary" size="small" @click="onSearch">搜索</el-button>
            <el-button class="export-btn" type="primary" plain size="small" @click="onSearchReset">重置</el-button>
          </div>
        </el-col>
        <el-col :span="5" style="justify-content: flex-end">
          <el-button class="export-btn" type="primary" size="mini" @click="onAddEdit">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="complaint-table">
      <div class="table-inner">
        <vxe-table :data="tableData" stripe border align="center" height="100%" auto-resize>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="jobName" title="监测规则名称" min-width="180"></vxe-column>
          <vxe-column field="jobNum" title="编码" min-width="170"></vxe-column>
          <vxe-column field="linkNum" title="关联算法数量" width="130"></vxe-column>
          <vxe-column field="cronName" title="监测频率" min-width="180">
            <!--  #default="{ row }" -->
            <!-- <div>{{ row.cronName }}</div>
            <div>{{ row.jobCron }}</div> -->
          </vxe-column>
          <vxe-column field="jobDescribe" title="监测规则说明" min-width="170"></vxe-column>
          <vxe-column title="状态" width="100" #default="{ row }">
            <span :style="row.jobState | statusStyleFilter">{{ row.jobState | statusFilter }}</span>
          </vxe-column>
          <vxe-column field="createTime" title="创建时间" width="180"></vxe-column>
          <vxe-column title="操作" fixed="right" width="160" #default="{ row, rowIndex }">
            <el-button @click.native.prevent="onView(row)" type="text">查看</el-button>
            <el-button @click.native.prevent="onAddEdit(row)" type="text">修改</el-button>
            <el-button class="delete-btn" type="text" @click="deleteRow(row, rowIndex)">删除</el-button>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <div class="pag-box">
      <pagination
        :current-page.sync="pageIdx"
        :page-size.sync="pageSize"
        :total="totalSize"
        @currentChange="onPageChange"></pagination>
    </div>
  </div>
</template>

<script>
import { listJobPagesApi, deleteJobApi } from '@api/modules/judgMonitor.js'
import pagination from '@com/pagination.vue'
import { STATE } from '@utility/dict'

export default {
  name: 'JUDGMONITOR_LIST',
  components: {
    pagination,
  },
  data() {
    return {
      filtersVal: {
        keyWords: '',
      },
      pageIdx: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [],
    }
  },
  filters: {
    statusFilter(status) {
      return STATE[status] || ''
    },
    statusStyleFilter(status) {
      let style = ''
      switch (String(status)) {
        case STATE.stop:
          style = 'color: #333'
          break
        case STATE.enable:
          style = 'color: #006eff'
          break
        default:
          break
      }
      return style
    },
  },
  computed: {},
  watch: {},
  created() {
    this.getPageData()
  },
  methods: {
    resetPage() {
      this.pageIdx = 1
    },
    onPageChange() {
      this.getPageData()
    },
    refreshList() {
      this.resetPage()
      this.getPageData()
    },
    onSearchReset() {
      this.filtersVal = JSON.parse(JSON.stringify({}))
      this.refreshList()
    },
    onSearch(data) {
      this.filtersVal = { ...this.filtersVal, ...data }
      this.refreshList()
    },
    getPageData() {
      listJobPagesApi({ ...this.filtersVal, current: this.pageIdx, size: this.pageSize }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    deleteRow({ id }, idx) {
      this.$confirm('确定要删除该企业判定监测?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteJobApi(id).then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功！')
              this.tableData.splice(idx, 1)
            }
          })
        })
        .catch(() => {})
    },
    // 添加、编辑
    onAddEdit({ id }) {
      this.$router.push({
        name: 'judgMonitorCreate',
        params: { id: id },
      })
    },
    // 查看
    onView({ id }) {
      this.$router.push({
        name: 'judgMonitorDetails',
        params: { id: id },
      })
      /* this.$router.push({
        name: 'judgAlgorithmCreate',
        params: { id: '111', view: '1' },
      }) */
    },
  },
}
</script>

<style lang="scss" scoped>
.complaint-list {
  height: 100%;
  overflow: hidden;
  @include flex-y;
  .conditions {
    margin: 12px 0;
    .page-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .search-input {
      // margin-left: 20px;
      width: 450px;
    }
    .search-btn {
      margin-left: 20px;
    }
    .label {
      font-size: 16px;
      min-width: 80px;
      color: #666;
      margin-left: 5px;
    }

    ::v-deep .el-col {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-range-separator {
      width: auto;
    }
    .export-btn {
      font-size: 16px;
    }
  }
  .complaint-table {
    @include flex-1;
    position: relative;
    .table-inner {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
    .eva-content {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .delete-btn {
      color: #fc6969;
    }
  }
  .pag-box {
    padding: 0 4px;
    margin: 10px 0;
  }
}
</style>
